<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <el-form ref="form" :model="form" label-width="80px" class="reset-form">
                    <el-input @input="schoolTrList(page.pageNum)" class="reset-input" placeholder="搜索教师姓名或教职工号"
                        v-model="form.searchText">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click="schoolTrList()"></i>
                    </el-input>
                </el-form>
                <div class="user-list radio">
                    <el-col class="box box-pack-center ml30">
                        <div class="list box box-align-center">
                            <span class="item">姓名</span>
                            <span class="item">手机号</span>
                            <span class="item">教职工号</span>
                        </div>
                    </el-col>
                    <el-radio-group v-model="form.radio">
                        <el-radio v-for="(item,i) in page.list" :label="item" :key="i">
                            <div class="list box box-align-center">
                                <span class="item">{{item.name}}</span>
                                <span class="item">{{item.mobile}}</span>
                                <span class="item">{{item.zgh}}</span>
                            </div>
                        </el-radio>
                    </el-radio-group>
                    <el-pagination @current-change="schoolTrList" background layout="prev, pager, next"
                        :total="page.total" :current-page="page.pageNum" :page-size="page.pageSize" hide-on-single-page>
                    </el-pagination>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                type: String
            },
            classid: {
                type: Number
            },
            xnxq: {
                type: String
            }
        },
        data() {
            return {
                form: {
                    searchText: '',
                    radio: ''
                },
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                loginInfo: this.$store.state.loginInfo,
                schoolid: this.$store.state.schoolId
            };
        },
        methods: {
            schoolTrList(pageNum) {
                var params = {
                    schoolid: this.schoolid,
                    searchtext: this.form.searchText,
                    pageNum: pageNum
                };
                this.$ajax.post('/dteacher/teamTrList', params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            //获取学校老师列表
            getTeacherData(pageNum) {
                var params = {
                    schoolid: this.schoolid,
                    searchtext: this.form.searchText,
                    pageNum: pageNum
                };
                this.$api.jyz.schoolTrList(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                    } else {
                        this.$message.error('操作失败！');
                    }
                })
            },
            handleClose() {
                this.$emit('clickClose')
            },
            onshow() {
                console.log("onshow")
                this.form = {};
            },
            onSubmit() {
                this.$confirm('确认将未绑定的带班教师设置为' + this.form.radio.name + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params = {
                        'schoolid': this.$store.state.schoolId,
                        'trId': this.form.radio.id,
                        'trName': this.form.radio.name,
                    };
                    this.$ajax.post('/dclass/setClassTr', params).then(res => {
                        if (res.code == '0') {
                            this.$message.success('设置成功！');
                            this.$emit('updateData')
                            this.handleClose()
                        } else {
                            this.$message.error('操作失败！');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .upload-icon {
        width: 110px;
        height: 110px;
        background-color: #F0F1F8;
        line-height: 110px;
        color: #626BF1;
        font-size: 30px;
        border-radius: 10px;
    }

    .avatar {
        width: 110px;
        height: 110px;
    }

    .w100 {
        width: 100%;
    }

    .reset-form {
        padding: 0 20px;
    }


    .user-list {

        .checkbox__label {
            width: 80%;
        }

        .list {
            padding: 10px 0;
        }

        .item {
            display: block;
            width: 120px;
            margin-right: 30px;
        }
    }


    //单选
    .user-list>>>.el-radio {
        padding: 0 20px;
        width: 585px;
        margin-right: 0;
        display: flex;
        justify-content: center;
    }

    .user-list>>>.el-radio__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-radio__input.is-checked+.el-radio__label {
        color: #000000;
    }

    .user-list>>>.el-radio__input.is-checked .el-radio__inner {
        border-color: #626BF1;
        background: #626BF1;
    }
</style>
